<template>
  <div class="dashboard">
    <topAndbottom>
      <template #title>阶段配置</template>
      <template #container>
        <div class="common-container">
          <div class="container-search">
            <el-form
              :model="tableDate.searchParams"
              label-width="80px"
              @submit.native.prevent=""
              :inline="true"
              size="default"
            >
              <el-form-item label="经验名">
                <el-input
                  v-model="tableDate.searchParams.experienceName"
                  clearable
                  @clear="serachBtn"
                />
              </el-form-item>
              <el-form-item>
                <el-button :icon="Search" @click="serachBtn" type="primary">搜索</el-button>
                <el-button :icon="Close" @click="resetBtn" type="danger">重置</el-button>
                <el-button :icon="Plus" type="success" @click="addBtn"
                  >新增</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="container-table">
            <el-table
              v-loading="tableDate.Loading"
              :height="tableDate.tableHeight"
              :row-class-name="tableRowClassName"
              :data="tableDate.list"
              style="width: 100%"
            
            >
              <el-table-column
                prop="username"
                show-overflow-tooltip
                label="创建人"
                align="center"
              />
              <el-table-column
                prop="experienceName"
                show-overflow-tooltip
                label="经验名称"
                align="center"
              />
              <el-table-column
                prop="createTime"
                show-overflow-tooltip
                label="创建时间"
                align="center"
              >
                <template #default="scope">
                  {{ global.$formatDateTime(scope.row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="审核状态"
                align="center"
              >
                <template #default="scope">
                  {{
                    scope.row.auditStatus === "0"
                      ? "待审核"
                      : scope.row.auditStatus === "1"
                      ? "审核成功"
                      : "审核驳回"
                  }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                  <el-button
                    type="warning"
                    :icon="Edit"
                    @click="editBtn(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    type="danger"
                    :icon="Close"
                    @click="deleteBtn(scope.row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="container-footer">
            <el-pagination
              v-model:current-page="tableDate.search.page"
              v-model:page-size="tableDate.search.size"
              :page-sizes="[5, 10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableDate.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </template>
    </topAndbottom>
    <AddEdit ref="RefMyExperience" @save="save"></AddEdit>
  </div>
</template>

<script setup lang='ts'>
import AddEdit from "./components/AddEdit.vue";
import { Search, Plus, Edit, Close } from "@element-plus/icons";
import tableModel from "./tsModel/TableModel";
import useInstance from "@/hooks/useInstance";
import addEdit from "./tsModel/AddEdit";
const { global, proxy } = useInstance(); 
const {
  tableDate,
  getExperiencePage,
  serachBtn,  
  resetBtn,
  handleSizeChange,
  handleCurrentChange,
  tableRowClassName,
  auditStatusMethod,
} = tableModel();
const { addBtn, editBtn, deleteBtn, RefMyExperience, save } = addEdit(
  tableDate,
  getExperiencePage
);
</script>
<style scoped lang='scss'>
.dashboard {
  height: 100%;
  :deep(.el-form-item__label) {
    color: #fff;
  }
}
</style>